<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="es" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="es" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="es" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>SAI - Sistema de Administración Interno de Clases Online</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                padding:40px;
            }
            
            body > form {
                max-width:960px;
                margin:auto;
            }
            
            body > form > section {
                margin-bottom:50px;
            }
        </style>
        <link rel="stylesheet" href="styles/normalize.css">
        <link rel="stylesheet" href="styles/main.css">
        <link rel="stylesheet" href="styles/common.css">
        <link rel="stylesheet" href="styles/groups.css">
        <script src="scripts/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <form>
            <h2>Modulo agregar alumnos al grupo</h2>
            <section id="groups">
                <h3>Sin filtros y con alumnos preseleccionados</h3>
                <div class="groups-students-selector clearfix" id="students-selector-2">
                    <div class="form-container all-students">
                        <strong class="title">Listado de todos los alumnos</strong>
                        <div class="content">
                            <div class="search">
                                <span class="icon search"></span>
                                <input value="" type="text" placeholder="Buscar..." />
                                <button class="clear"><span class="icon circled-cross"></span><span class="text">Borrar</span></button>
                            </div>
                            <div class="filters hidden">
                                <strong>Filtrar por:</strong>
                                <button class="button" data-filter="2">Regulares</button>
                                <button class="button" data-filter="3">No regulares</button>
                                <button class="button" data-filter="4">Potencial</button>
                            </div>
                            <div class="form-input">
                                <div class="no-students-msg">
                                    <span>No se encuentran alumnos</span>
                                </div>
                                <label class="no-quote">
                                    <input value="0" type="checkbox" data-filter="2" checked />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Emmanuel Schönfeld Estani</span>
                                </label>
                                <label class="no-quote">
                                    <input value="1" type="checkbox" data-filter="2" checked />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Federico Martín Cano</span>
                                </label>
                                <label class="no-quote">
                                    <input value="2" type="checkbox" data-filter="2" checked />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Mario Freiría</span>
                                </label>
                                <label class="no-quote">
                                    <input value="3" type="checkbox" data-filter="3" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Mynor Montufar</span>
                                </label>
                                <label class="no-quote">
                                    <input value="4" type="checkbox" data-filter="2" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Federico Tropino</span>
                                </label>
                                <label class="no-quote">
                                    <input value="5" type="checkbox" data-filter="4" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Facundo Ariel Barreto</span>
                                </label>
                                <label class="no-quote">
                                    <input value="6" type="checkbox" data-filter="4" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Santiago Suarez</span>
                                </label>
                                <label class="no-quote">
                                    <input value="7" type="checkbox" data-filter="3" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Matías Alvariza</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-container selected-students">
                        <strong class="title">Alumnos seleccionados (<span class="total">0</span>)</strong>
                        <div class="content">
                            <div class="form-input">
                                <div class="no-students-msg">
                                    <span><span class="icon warning"></span> No hay alumnos seleccionados</span>
                                </div>
                                <!--<label class="no-quote">
                                    <input value="" type="checkbox" name="students" checked readonly />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Laoreet dolore</span><button class="button important red">Deseleccionar</button>
                                </label>-->
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section id="groups">
                <h3>Con filtros y sin alumnos pre-seleccionados </h3>
                <div class="groups-students-selector filters clearfix" id="students-selector-1">
                    <div class="form-container all-students">
                        <strong class="title">Listado de todos los alumnos</strong>
                        <div class="content">
                            <div class="search">
                                <span class="icon search"></span>
                                <input value="" type="text" placeholder="Buscar..." />
                                <button class="clear"><span class="icon circled-cross"></span><span class="text">Borrar</span></button>
                            </div>
                            <div class="filters">
                                <strong>Filtrar por:</strong>
                                <button class="button" data-filter="2">Regulares</button>
                                <button class="button" data-filter="3">No regulares</button>
                                <button class="button" data-filter="4">Potencial</button>
                            </div>
                            <div class="form-input">
                                <div class="no-students-msg">
                                    <span>No se encuentran alumnos</span>
                                </div>
                                <label class="no-quote">
                                    <input value="0" type="checkbox" data-filter="2" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Emmanuel Schönfeld Estani</span>
                                </label>
                                <label class="no-quote">
                                    <input value="1" type="checkbox" data-filter="2" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Federico Martín Cano</span>
                                </label>
                                <label class="no-quote">
                                    <input value="2" type="checkbox" data-filter="2" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Mario Freiría</span>
                                </label>
                                <label class="no-quote">
                                    <input value="3" type="checkbox" data-filter="3" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Mynor Montufar</span>
                                </label>
                                <label class="no-quote">
                                    <input value="4" type="checkbox" data-filter="2" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Federico Tropino</span>
                                </label>
                                <label class="no-quote">
                                    <input value="5" type="checkbox" data-filter="4" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Facundo Ariel Barreto</span>
                                </label>
                                <label class="no-quote">
                                    <input value="6" type="checkbox" data-filter="4" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Santiago Suarez</span>
                                </label>
                                <label class="no-quote">
                                    <input value="7" type="checkbox" data-filter="3" />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Matías Alvariza</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-container selected-students">
                        <strong class="title">Alumnos seleccionados (<span class="total">0</span>)</strong>
                        <div class="content">
                            <div class="form-input">
                                <div class="no-students-msg">
                                    <span><span class="icon warning"></span> No hay alumnos seleccionados</span>
                                </div>
                                <!--<label class="no-quote">
                                    <input value="" type="checkbox" name="students" checked readonly />
                                    <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                    <span class="text">Laoreet dolore</span><button class="button important red">Deseleccionar</button>
                                </label>-->
                            </div>
                        </div>
                    </div>
                </div>
            </section><!--
            <section id="groups">
                <h3>Listado de alumnos seleccionados</h3>
                <div class="content">
                    <div class="form-input">
                        <a href="" class="no-quote">
                            <img src="content/test-student-32x32.jpg" class="size-32x32" />
                            <span class="text">Laoreet dolore</span>
                        </a>
                        <a href="" class="no-quote">
                            <img src="content/test-student-32x32.jpg" class="size-32x32" />
                            <span class="text">Laoreet dolore</span>
                        </a>
                        <a href="" class="no-quote">
                            <img src="content/test-student-32x32.jpg" class="size-32x32" />
                            <span class="text">Laoreet dolore</span>
                        </a>
                    </div>
                </div>
            </section>
            <section id="groups">
                <h3>Listado de alumnos seleccionados (en contenedor)</h3>
                <div class="form-container selected-students">
                    <strong class="title">Alumnos</strong>
                    <div class="content">
                        <div class="form-input">
                            <a href="" class="no-quote">
                                <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                <span class="text">Laoreet dolore</span>
                            </a>
                            <a href="" class="no-quote">
                                <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                <span class="text">Laoreet dolore</span>
                            </a>
                            <a href="" class="no-quote">
                                <img src="content/test-student-32x32.jpg" class="size-32x32" />
                                <span class="text">Laoreet dolore</span>
                            </a>
                        </div>
                    </div>
                </div>
            </section>-->
        </form>
        
        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="scripts/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="scripts/plugins.js"></script>
        <script src="scripts/main.js"></script>
        <script src="scripts/groups.js"></script>
    </body>
</html>
